<template>
  <div class="container">
    <el-row :gutter="10">
      <el-col :span="5" class="left">
        <div class="left-header">
          <el-button @click="toRedict">发文拟稿</el-button>
          <el-button type="primary">收文登记</el-button>
        </div>
        <div class="left-middle">
          <div class="left-middle-header">
            <span></span>按公文种类分类（16）
          </div>
          <div class="left-middle-categorys">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>决议</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>决议</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>命令</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>公告</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>通告</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>意见</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>通知</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>通报</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>报告</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>请示</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>批复</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>议案</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>涵</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>纪要</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>公示</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>决议</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>决议</span>
                  <span>1</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="left-middle-category">
                  <span>决议</span>
                  <span>1</span>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="left-tail">
          <div class="left-tail-header">
            <span></span>按主题分类（0）
          </div>
          <div class="left-tail-theme" v-for="i in categorys" :key="i">
            <span :class="[i <=3 ? 'span1':'span1-1' ]">{{i}}</span>
            <span class="span2">国土资源、能源</span>
            <span class="span3">0</span>
          </div>
          
        </div>
      </el-col>
      <el-col :span="19" class="right">
        <div class="right-search">
          <el-input v-model="input" class="input" placeholder="请输入内容"></el-input>
          <el-button type="primary">搜索</el-button>
          <span @click="isHidden = !isHidden" style="margin-left:5px;s">高级搜索</span>
        </div>
        <div class="advanced-query" v-show="isHidden">
          <div class="advanced-query-form">
            <div class="input-form">
              <div class="input-form-label">公文标题:</div>
              <div class="input-form-input">
                <el-input v-model="input" placeholder="请输入内容" class="input-form-in"></el-input>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">公文种类:</div>
              <div class="input-form-input">
                <span :class="{'spanbg':spantype==1}" @click="spantype = 1">全部</span>
                <span :class="{'spanbg':spantype==2}" @click="spantype = 2">全部指定公文种类</span>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  v-show="spantype == 2"
                  class="input-form-in"
                ></el-input>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">主题分类:</div>
              <div class="input-form-input">
                <span :class="{'spanbg':spancategory==1}" @click="spancategory = 1">全部</span>
                <span :class="{'spanbg':spancategory==2}" @click="spancategory = 2">指定主题分类</span>
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  v-show="spancategory == 2"
                  class="input-form-in"
                ></el-input>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">发文字号:</div>
              <div class="input-form-input">
                <el-input v-model="input" placeholder="请输入内容" class="input-form-in"></el-input>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">成文日期:</div>
              <div class="input-form-input">
                <span :class="{'spanbg':spantime==1}" @click="spantime = 1">全部</span>
                <span :class="{'spanbg':spantime==2}" @click="spantime = 2">今天</span>
                <span :class="{'spanbg':spantime==3}" @click="spantime = 3">本周</span>
                <span :class="{'spanbg':spantime==4}" @click="spantime = 4">本月</span>
                <span :class="{'spanbg':spantime==5}" @click="spantime = 5">上个月</span>
                <span :class="{'spanbg':spantime==6}" @click="spantime = 6">本季</span>
                <span :class="{'spanbg':spantime==7}" @click="spantime = 7">本年</span>
                <span :class="{'spanbg':spantime==8}" @click="spantime = 8">上一年</span>

                <span :class="{'spanbg':spantime==9}" @click="spantime = 9">指定日期范围</span>
                <el-date-picker
                  class="input-form-in"
                  v-show="spantime == 9"
                  v-model="value1"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </div>
            </div>
            <div class="input-form">
              <div class="input-form-label">阅读状态:</div>
              <div class="input-form-input">
                <span :class="{'spanbg':spanstatus==1}" @click="spanstatus = 1">全部</span>
                <span :class="{'spanbg':spanstatus==2}" @click="spanstatus = 2">已读</span>
                <span :class="{'spanbg':spanstatus==3}" @click="spanstatus = 3">未读</span>
              </div>
            </div>
          </div>
          <div class="advanced-query-tail">
            <el-button>搜索</el-button>
            <el-button type="primary">重置</el-button>
            <el-button>取消</el-button>
          </div>
        </div>
        <div class="right-archives">
          <div class="right-archives-header">公文库</div>
          <div class="right-archives-content">
            <el-row :gutter="20" style>
              <el-col :span="11" class="right-archives-content-col">
                <p>
                  <a href>发文件测试</a>
                </p>
                <div class="right-archives-content-time">2019-03-08 17:42:26</div>
              </el-col>
              <el-col :span="11" class="right-archives-content-col">
                <p>
                  <a href>3333333333333333333</a>
                </p>
                <div class="right-archives-content-time">2019-03-08 17:42:26</div>
              </el-col>
              <el-col :span="11" class="right-archives-content-col">
                <p>
                  <a href>爱仕达大所大所多</a>
                </p>
                <div class="right-archives-content-time">2019-03-08 17:42:26</div>
              </el-col>
              <el-col :span="11" class="right-archives-content-col">
                <p>
                  <a href>实打实大大大大多</a>
                </p>
                <div class="right-archives-content-time">2019-03-08 17:42:26</div>
              </el-col>
              <el-col :span="11" class="right-archives-content-col">
                <p>
                  <a href>111111111111111111</a>
                </p>
                <div class="right-archives-content-time">2019-03-08 17:42:26</div>
              </el-col>
              <el-col :span="11" class="right-archives-content-col">
                <p>
                  <a href>阿达女</a>
                </p>
                <div class="right-archives-content-time">2019-03-08 17:42:26</div>
              </el-col>
            </el-row>
          </div>
        </div>
        <div class="right-tail">
          <div class="right-tail-header">待办公文</div>
          <div class="right-tail-content">
            <div class="right-tail-content-top">
              <span :class="{'spanline':spanline==1}" @click="spanline=1">待办发文(0)</span>
              <span :class="{'spanline':spanline==2}" @click="spanline=2">待办收文(0)</span>
              <span :class="{'spanline':spanline==3}" @click="spanline=3">待办签报(0)</span>
            </div>
            <div class="right-tail-content-lists">
              <div class="right-tail-content-list">
                <div class="listbtn">
                  <button>未设置</button>
                </div>
                <div class="right-tail-content-text">
                  <p>
                    <a href>上级单位来文-杨文元-2020-04-20</a>
                  </p>
                  <div class="right-tail-content-text-time">杨文元 2020-04-20 17:10:17</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      spanline: 1, // 1-待办发文 2-待办收文 3-待办签报
      isHidden: false,
      spantype: 1, //公文种类
      spancategory: 1, //主题分类
      spantime: 1, //成文日期
      spanstatus: 1, //阅读状态
      categorys:[1,2,3,4,5,6],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      input: ""
    };
  },
  methods: {
    toRedict() {
      this.$router.push({
        name: '创建',
      })
      // let routeUrl = this.$router.resolve({
      //   path: "/mdp/arc/doc/documentAdd",
      // });
      // window.open(routeUrl.href, '_blank');

    }
  }
};
</script>
<style lang="scss" scoped>
* {
  font-size: 12px;
  font-family: "微软雅黑";
}
.left {
  padding: 20px !important;
  border-right: 1px solid #eaeaea;
  .left-header {
    display: flex;
    justify-content: center;
  }
  .left-middle {
    .left-middle-header {
      height: 32px;
      padding-left: 0;
      color: #333;
      letter-spacing: -0.08px;
      line-height: 18px;
      font-weight: 700;
      vertical-align: middle;
      display: table-cell;
      span {
        border-left: 3px solid #0984e3;
        margin-right: 15px;
      }
    }
    .left-middle-categorys {
      padding-left: 15px;
      .left-middle-category {
        height: 30px;
        background: #eee;
        border-radius: 4px;
        text-align: left;
        vertical-align: middle;
        line-height: 30px;
        cursor: pointer;
        margin: 3px;
        display: flex;
        justify-content: flex-start;

        span {
          padding-left: 12px;
          flex: 1;
          font-size: 12px;
        }
      }
      .left-middle-category:hover {
        background: #b2bec3;
      }
    }
  }
  .left-tail {
    .left-tail-header {
      height: 32px;
      padding-left: 0;
      color: #333;
      letter-spacing: -0.08px;
      line-height: 18px;
      font-weight: 700;
      vertical-align: middle;
      display: table-cell;
      span {
        border-left: 3px solid #0984e3;
        margin-right: 15px;
      }
    }
    .left-tail-theme {
      border-bottom: 1px dashed #e4e4e4;
      height: 30px;
      line-height: 30px;
      .span1 {
        font-size: 16px;
        font-style: italic;
        color: #fe9250;
        vertical-align: middle;
        margin-left: 15px;
      }
      .span1-1{
         font-size: 16px;
        font-style: italic;
        color: #000000;
        vertical-align: middle;
        margin-left: 15px;
      }
      .span2 {
        margin-left: 15px;
      }
      .span3 {
        float: right;
      }
    }
  }
}

.right {
  position: relative;
  padding: 15px !important;
  .right-search {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-end;
    .input {
      width: 60% !important;
      padding: 0 5px;
    }
    span:hover {
      cursor: pointer;
    }
  }
  .advanced-query {
    position: absolute;
    background: white;
    width: 100%;
    z-index: 1000;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    .advanced-query-form {
      padding: 15px;
      width: 100%;
    }
    .input-form {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-bottom: 20px;
      width: 100%;
      height: 30px;
      line-height: 30px;
      .input-form-label {
        width: 20%;
      }
      .input-form-input {
        width: 80%;
        height: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        line-height: 30px;
        .input-form-in {
          width: 30% !important;
        }

        span {
          padding: 0 5px;
          border-radius: 4px;
          margin-right: 10px;
        }
        span:hover {
          color: #2db7f5;
          cursor: pointer;
        }
        .spanbg {
          background: #2db7f5;
          color: white;
        }
        .spanbg:hover {
          background: #2db7f5;
          color: white;
        }
      }
    }
    .advanced-query-tail {
      padding: 15px;
      display: flex;
      border-top: 1px solid #e2e2e2;
      justify-content: center;
      line-height: 40px;
    }
  }
  .right-archives {
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin-bottom: 15px;
    .right-archives-header {
      background: #f9f9f9;
      padding: 0 13px;
      height: 40px;
      line-height: 40px;
      font-weight: 700;
    }
    .right-archives-content {
      font-size: 12px;
      padding: 15px 25px;
      .right-archives-content-col {
        margin-right: 4%;
        padding: 10px;
        border-bottom: 1px solid #e4e4e4;
        p {
          margin: 0px;
          margin-bottom: 5px;
          opacity: 0.8;
          a {
            color: #4d7ad8;
            text-decoration: none;
            outline: none;
            cursor: pointer;
          }
        }
      }
      .right-archives-content-col:hover {
        background: #e9f7ff;
      }
      .right-archives-content-time {
        opacity: 0.5;
        color: #999;
        letter-spacing: -0.08px;
        line-height: 18px;
      }
    }
  }
  .right-tail {
    border: 1px solid #e2e2e2;
    border-radius: 3px;
    margin-bottom: 15px;

    .right-tail-header {
      background: #f9f9f9;
      padding: 0 13px;
      height: 40px;
      line-height: 40px;
      font-weight: 700;
    }
    .right-tail-content {
      padding: 15px 25px;
      .right-tail-content-top {
        display: flex;
        justify-content: flex-start;
        border-bottom: 1px solid #e2e2e2;
        span {
          padding: 0 15px 15px 15px;
          display: block;
        }
        span:hover {
          color: #2db7f5;
          cursor: pointer;
        }
      }

      .spanline {
        border-bottom: 2px solid #2db7f5;
        color: #2db7f5;
      }
      .right-tail-content-lists {
        display: flex;
        justify-content: flex-start;
        .right-tail-content-list {
          display: flex;
          justify-content: flex-start;
          padding: 15px;
          width: 100%;
          border-bottom: 1px dashed #e4e4e4;
          .listbtn {
            button {
              background: white;
              border: 1px solid #2db7f5;
              border-radius: 4px;
              padding: 5px 8px;
            }
            margin-right: 20px;
          }
          .right-tail-content-text {
            p {
              margin: 0px;
              margin-bottom: 5px;
              a {
                color: #4d7ad8;
                text-decoration: none;
                outline: none;
                cursor: pointer;
                font-weight: 700;
              }
            }
            .right-tail-content-text-time {
              opacity: 0.5;
            }
          }
        }
        .right-tail-content-list:hover {
          background: #e9f7ff;
        }
      }
    }
  }
}
</style>